<template>
<div class="add-template self-background">
    <span class="template-title">实验模板</span>
    <div class="template-left">
        <el-form class="el-form-between" @submit.native.prevent>
            <el-form-item label="">
                <el-input clearable placeholder="搜索" @keyup.enter.native="search" v-model="keyword">
                    <i slot="prefix" class="iconfont icon-sousuo" v-preventReClick="2000" @click="search"></i>
                </el-input>
                <!-- <el-checkbox v-model="favoriteStatus">我的收藏</el-checkbox> -->
            </el-form-item>
            <el-form-item>
                <el-button v-preventReClick="2000" type="primary" @click="importExpTemplate">导入实验模板</el-button>
            </el-form-item>
        </el-form>
        <div class="loading-wrap-box" element-loading-background="#f5f5f5" v-loading="loading">
            <div class="wrap-box">
                <no-data v-if="!templateList.length" :types="true">
                    <span>暂无数据</span>
                </no-data>
                <template v-for="(item, i) in templateList">
                    <el-card v-if="getIsShow(item)" class="card-item" shadow="always" :key="i">
                        <div slot="header" class="card-img-box">
                            <img class="img" :src="require(`../../assets/img/${item.imgPath}`)" alt="">
                            <div class="img-hover">
                                <el-button @click="handleAdd(item)">使用模板</el-button>
                                <el-button @click="handleCheckDocu(i)">查看详情</el-button>
                                <span class="icon-btns">
                                    <i @click="handleExportTemplate" class="iconfont icon-daochu"></i>
                                    <!-- <i @click="handleStoreUp(item)" :class="item.favoriteStatus ? 'el-icon-star-on' : 'el-icon-star-off'"></i> -->
                                    <!-- <i @click="handleCheckTemplate" class="el-icon-view"></i>
                                    <i @click="handleDeleteTemplate" class="el-icon-more"></i> -->
                                </span>
                            </div>
                        </div>
                        <div class="clearfix">
                            <span>{{item.templateName}}</span>
                        </div>
                        <el-tooltip :disabled="item.description.length > 55 ? false : true" :content="item.description" placement="top">
                            <div class="card-item-con">{{item.description}}</div>
                        </el-tooltip>
                        <!-- <div class="card-item-foot">
                            <span class="subgroup-name"><i class="iconfont icon-suanfaku"></i>{{item.summary.algorithm}}</span>
                        </div> -->
                        <!-- <div class="card-item-foot">
                            <span class="subgroup-name"><i class="iconfont icon-yinxing"></i>落地行：泰隆、民泰、众邦</span>
                        </div> -->
                        <div class="card-item-foot">
                        <!-- <div class="card-item-foot justify-between"> -->
                            <span>引用次数 {{item.templateCount}}次
                                <!-- <span class="icon-hots">热度<i v-for="(val, i) in item.summary.star" :key="i" class="iconfont icon-huo"></i></span> -->
                            </span>
                        </div>
                    </el-card>
                </template>
                <p class="warp-box-p"><span @click="showMoreTemplate">{{isShowAllTemplate?'':'展开更多'}}</span></p>
            </div>
        </div>
    </div>
    <div class="template-right">
        <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(item, i) in docLink" :key="i" :name="`${i}`">
                <template slot="title">
                    {{item.title}}
                </template>
                <el-button v-for="(item, index) in item.children" :key="index" type="text" @click="handleToDoc(item.link)">
                    {{item.title}}
                </el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
    <add-template v-if="addForm.show" :addForm="addForm" @save="handleSave"></add-template>
</div>
</template>

<script>
import AddTemplate from '../expEdit/AddExp'
import NoData from '../../components/NoData'
import {
    mapGetters, mapMutations
} from 'vuex'
const docLink = {
    0: 'creditDefault', // 信用卡违约预测
    1: 'creditSale', // 信用卡精准营销
    2: 'customerChurn', // 客户流失预警
    3: 'loanDefault', // 贷款违约预测
    4: 'bostonHousePrice', // 波士顿房价预测
    5: 'customerSegmentation', // 客户消费细分模型
    6: 'loanApprovalPrediction', // 信贷审批预测模型
    7: 'loanCustomerDetention', // 小贷客户挽留模型
    8: 'stockPricePrediction', // 股票走势预测模型
    9: 'creditCustomerSegmentation' // 信用卡客户细分模型
}
export default {
    name: 'ExpTemplate',
    components: {
        AddTemplate,
        NoData
    },
    data () {
        return {
            docLink: [
                {
                    title: '最新功能',
                    children: [
                        { title: '交叉验证组件', link: 'evaluate/crossvalidationcomponent' }
                    ]
                },
                {
                    title: '新手引导',
                    children: [
                        { title: '快速上手', link: 'quickstart' },
                        { title: '如何创建实验模板', link: 'quickstartTemplate' },
                        { title: '如何导入数据', link: 'expEdit/uploaddata' }
                    ]
                },
                {
                    title: '常见问题',
                    children: [
                        { title: '如何调出最优参数', link: 'optimalparameter' }
                    ]
                },
                {
                    title: '视频课程',
                    children: []
                }
            ],
            activeNames: ['0', '1', '2', '3'],
            keyword: null,
            favoriteStatus: false,
            addForm: {
                show: false,
                title: '新增实验',
                isUpload: true,
                form: {
                    templateId: null,
                    experimentName: null,
                    description: null,
                    catalogId: null
                }
            },
            loading: false,
            templateList: [],
            oldTemplateList: [],
            allTemplateList: [],
            isShowAllTemplate: true,
            clicks: 0
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId',
            typeId: 'common/getTypeId'
        })
    },
    created () {
        this.init()
    },
    watch: {
        keyword () {
            this.search()
        }
    },
    methods: {
        ...mapMutations({
            setTypeId: 'common/setTypeId'
        }),
        showMoreTemplate () {
            this.clicks++
            this.templateList = this.allTemplateList.slice(0, 9 + this.clicks * 3)
            this.oldTemplateList = this.allTemplateList.slice(0, 9 + this.clicks * 3)
            this.isShowAllTemplate = this.templateList.length === this.allTemplateList.length
        },
        getIsShow (item) {
            return this.favoriteStatus ? item.favoriteStatus : true
        },
        handleToDoc (link) {
            window.open(`${window.location.origin}/doc/${link}.html`, '_blank')
        },
        search () {
            if (this.keyword) {
                this.templateList = this.oldTemplateList.filter(item => {
                    return item.templateName.includes(this.keyword)
                })
                this.isShowAllTemplate = true
            } else {
                this.templateList = this.oldTemplateList
                this.isShowAllTemplate = this.templateList.length === this.allTemplateList.length
            }
        },
        // 导入实验模板
        importExpTemplate () {
            this.$message.warning('此功能正在开发中，敬请期待!')
        },
        // 导出模板
        handleExportTemplate () {
            this.$message.warning('此功能正在开发中，敬请期待!')
        },
        // 收藏模板
        handleStoreUp (item) {
            let url = null
            let msg = null
            if (!item.favoriteStatus) {
                url = '/experiment/createFavorTemplate'
                msg = '收藏成功'
            } else {
                url = '/experiment/cancerFavorTemplate'
                msg = '取消成功'
            }
            let params = {
                projectId: this.projectId,
                templateId: item.templateId
            }
            this.$post(url, params).then(res => {
                if (res) {
                    this.$message.success(msg)
                    item.favoriteStatus = !item.favoriteStatus
                }
            })
        },
        // 查看模板
        handleCheckTemplate () {
            this.$message.warning('此功能正在开发中，敬请期待!')
        },
        // 删除模板
        handleDeleteTemplate () {
            this.$message.warning('此功能正在开发中，敬请期待!')
        },
        init () {
            this.loading = true
            const params = {
                projectId: this.projectId
            }
            this.$post('/experiment/queryExperimentTemplates', params).then(res => {
                if (res) {
                    this.templateList = res.rows.slice(0, 9)
                    this.oldTemplateList = res.rows.slice(0, 9)
                    this.allTemplateList = res.rows
                    this.isShowAllTemplate = this.templateList.length === this.allTemplateList.length
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleCheckDocu (i) {
            window.open(`${window.location.origin}/doc/templates/${docLink[i]}.html`, '_blank')
        },
        handleAdd (item) {
            const { templateName, description, templateId } = item
            this.addForm.form = {
                experimentName: templateName,
                description,
                templateId,
                catalogId: null
            }
            this.addForm.isUpload = false
            this.addForm.show = true
        },
        handleSave () {
            const {
                templateId,
                experimentName,
                description,
                catalogId
            } = this.addForm.form
            const params = {
                projectId: this.projectId,
                experimentName,
                templateId,
                description,
                catalogId
            }
            this.$post('/experiment/createByTemplate', params).then(res => {
                if (res) {
                    this.addForm.show = false
                    this.$message.success('保存成功')
                    this.typeId !== 0 && this.setTypeId(0)
                    this.$router.push({
                        name: '实验编辑',
                        params: {
                            experimentId: res.experimentId
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="less">
.add-template {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 5px;
    .icon-huo {
        color: #F06B1D;
    }
    .template-title {
        display: inline-block;
        transform: translateY(-8px);
        font-family: 'PingFangSC-Medium';
        font-size: 18px;
        color: #333333;
        padding-left: 24px;
    }
    .el-checkbox {
        margin-left: 20px;
        .el-checkbox__input.is-checked+.el-checkbox__label {
            color: rgba(51, 51, 51, .85);
        }
        .el-checkbox__label {
            padding-left: 8px;
        }
        .el-checkbox__inner {
            border-radius: 0;
        }
    }
    .template-left {
        width: calc(80% - 32px);
        padding-left: 24px;
        height: 100%;
        .el-form-between {
            padding-top: 5px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            .el-form-item__content {
                display: flex;
                align-items: center;
            }
        }
        .wrap-box {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            .card-item {
                width: calc(33.3% - 11px);
                margin-bottom: 16px;
                &:nth-child(3n+2) {
                    margin: 0 16px 16px;
                }
            }
            .el-card__body {
                padding: 16px !important;
            }
            .card-item-foot {
                display: flex;
                align-items: center;
                flex-direction: row-reverse;
                font-size: 12px;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .subgroup-name {
                    display: inline-block;
                    min-width:101px;
                    overflow: hidden;
                    i {
                        margin: 0 5px 0 0;
                    }
                }
                i {
                    font-size: 15px;
                }
                &:last-child {
                    .icon-hots {
                         margin-left: 10px;
                    }
                }
            }
            .justify-between {
                & > span {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
            }
            .card-item-con {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                color: rgba(51, 51, 51, .85);
                font-size: 14px;
                line-height: 20px;
                margin: 9px 0;
                min-height: 57px;
                letter-spacing: 1px;
            }
            .clearfix {
                font-size: 18px;
                color: #333333;
                font-family: 'PingFangSC-Medium';
                font-weight: 700;
            }
            .el-card__header {
                padding: 16px;
                border-bottom: 1px solid rgba(187, 187, 187, 0.51);
                position: relative;
                .card-img-box {
                    background: #EEEEEE;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .img {
                        width: 100%
                    }
                    &:hover {
                        .img-hover {
                            z-index: 2;
                            opacity: .8;
                        }
                    }
                    .img-hover {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        transition: all .3s;
                        opacity: 0;
                        left: 0;
                        top: 0;
                        background: #000000;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        .el-button--default {
                            color: #fff;
                            background-color: #000000;
                            border: 1px solid rgba(187, 187, 187, .5);
                            &:hover {
                                background: #2680EB;
                                border-color: #2680EB;
                                color: #FFF;
                            }
                        }
                        .el-button {
                            margin: 12px 0;
                            width: 45%;
                            border-radius: 0;
                            font-size: 14px;
                        }
                        .icon-btns {
                            position: absolute;
                            top: 9px;
                            right: 9px;
                            i {
                                margin-left: 9px;
                                font-size: 15px;
                                cursor: pointer;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
    .template-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 20%;
        height: 100%;
        background: #fff;
        padding: 16px;
        overflow: auto;
        .el-collapse {
            border-top: none;
            border-bottom: none;
        }
        .el-collapse-item__content {
            padding-left: 16px;
            display: flex;
            flex-direction: column;
            .el-button--text {
                text-align: left;
                margin-left: 0;
            }
        }
        .el-collapse-item__wrap, .el-collapse-item__header {
             border-bottom: none;
             font-size: 14px;
        }
    }
    .loading-wrap-box {
        position: relative;
        height: calc(100% - 90px);
        overflow-x: hidden;
        overflow-y: auto;
        .warp-box-p {
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            margin: 0 auto;
            span {
                cursor: pointer;
                &:hover {
                    color: #2680EB;
                }
            }
        }
    }
}
</style>
